<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .size200 {
        background-color: red;
        width: 200px;
        height: 200px;
    }
</style>
<body>
<div id="app">
    <!--
        v-if 根据条件判断是否显示某个元素，原理是动态操作dom插入或删除某个节点
        v-else 你懂的，必须跟在v-if 或者 v-else-if
    -->
    <button @click="show = !show">点我改变是否显示</button>
    <div class="size200" v-if="show"></div>
    <p v-else>div隐藏了 我就出来！</p>
    <hr>
    <!--
        v-show是某个元素是否显示，原理就是控制css的display；
        并不会删除dom节点，并且只会渲染一次性能比v-if好👌🙅‍
    -->
    <button @click="canSee = !canSee">点我演示v-show</button>
    <div class="size200" v-show="canSee"></div>
</div>
<script src="lib/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            show: true,
            canSee: true
        },
        methods: {}
    })
</script>
</body>
</html>